// import { FormState } from './../../../.history/report-service/src/ChartForm/ChartForm_20220129100012';

import { EChartType, ESubAxisChartType } from "@/core/ChartType";
import ChartForm, { FormState } from "./ChartForm";
interface IYAxis {
    name: string;
    type: 'bar' | 'line' | 'area';
}
import { ChartFormItemContext } from "./ChartFormItem";
import { EChartFormItem, EMateDataType } from "./ChartItemType";
import { useFormState, useFormComputed, useFormCommonItems } from "./ActiveChartForm"
export default function AxisChartForm() {
    const [subChartType] = useFormCommonItems(["subChartType"]);
    const xAxisForm = useFormState({
        label: "X轴",
        value: "",
        placeHolder: "请选择X轴的数据",
        datas: "",
        type: EChartFormItem.Select,
        mateData: {
            type: EMateDataType.String
        }
    });
    const yAxisForm = useFormState({
        label: "Y轴",
        value: "",
        placeHolder: "请选择Y轴",
        // name: "yAxisForm",
        datas: [],
        type: EChartFormItem.Select,
        isMultiple: true,
        mateData: {
            type: EMateDataType.Number
        }
    });

    const series = useFormComputed([yAxisForm], () => {
        const currentY: Array<IYAxis> = yAxisForm.data;
        return `return ['${currentY.join("','")}'].map((column,index)=>{
                        return {
                            data:$originData.map(item=>{
                                return item[column]
                            }),
                            ${['', '{type:"line"}', '{type:"bar"}', '{type:"line", areaStyle: {}}'][subChartType.data]}
                        }
                    })
                `;
    });
    const yAxis = useFormComputed([], () => {
        console.log("yAxis");
        return {
            type: 'value'
        }
    });
    const legend = useFormComputed([yAxisForm], () => {
        const currentY: Array<IYAxis> = yAxisForm.data;
        return {
            data: `[${currentY.join("', '")}]`
        }
    });
    const xAxis = useFormComputed([xAxisForm], () => {
        const currentX: string = xAxisForm.data;
        return {
            type: 'category',
            data: `return $originData.map(row=>{
                    return row.${currentX};
                })`
        };
    });
    const tooltip = useFormComputed([], () => {
        return {
            trigger: 'item'
        };
    });

    return {
        xAxisForm, yAxisForm, series, yAxis, legend, xAxis, tooltip
    }
}

class AxisChartFormClass extends ChartForm {
    private xAxisForm: ChartFormItemContext;
    private yAxisForm: ChartFormItemContext;
    constructor() {
        super();
        this.useFormState("xAxisForm", this.xAxisForm = new ChartFormItemContext({
            label: "X轴",
            value: "",
            placeHolder: "请选择X轴的数据",
            // name: "xAxisForm",
            datas: "",
            type: EChartFormItem.Select,
            mateData: {
                type: EMateDataType.String
            }
        }));
        this.useFormState("yAxisForm", this.yAxisForm = new ChartFormItemContext({
            label: "Y轴",
            value: "",
            placeHolder: "请选择Y轴",
            // name: "yAxisForm",
            datas: [],
            type: EChartFormItem.Select,
            isMultiple: true,
            mateData: {
                type: EMateDataType.Number
            }
        }));


        //数据返回
        this.useComputed("series", [this.yAxisForm, this.subChartType], () => {
            const currentY: Array<IYAxis> = this.yAxisForm.data;
            return `return ['${currentY.join("','")}'].map((column,index)=>{
                        return {
                            data:$originData.map(item=>{
                                return item[column]
                            }),
                            ${['', '{type:"line"}', '{type:"bar"}', '{type:"line", areaStyle: {}}'][this.subChartType.data]}
                        }
                    })
                `;
        });

        this.useComputed("yAxis", [], () => {
            console.log("yAxis");
            return {
                type: 'value'
            }
        })
        this.useComputed("legend", [this.yAxisForm], () => {
            const currentY: Array<IYAxis> = this.yAxisForm.data;
            return {
                data: `[${currentY.join("', '")}]`
            }
        })
        this.useComputed("xAxis", [this.xAxisForm], () => {
            const currentX: string = this.xAxisForm.data;
            return {
                type: 'category',
                data: `return $originData.map(row=>{
                    return row.${currentX};
                })`
            };
        })
        this.useComputed("tooltip", [], () => {
            return {
                trigger: 'item'
            };
        })
    }
    chartDataComputed() {

    }
}